<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <router-link 
          :to="{
            name:'xiangqing',
            params:{
              id:m.id,
              title:m.title,
              content:m.content
            }
          }"
        >
          {{m.title}}
        </router-link>
        <button>点我查看详情</button>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
	export default {
	  name: "Message",
    data() {
      return {
        messageList:[
          {id:'tafdswq34',title:'来自10086的消息',content:'您已欠费99元，请及时缴费'},
          {id:'tafdswq35',title:'来自10010的消息',content:'您的流量已经超出100GB'},
          {id:'tafdswq36',title:'来自10000的消息',content:'好消息，好消息，你已获得vip身份'}
        ]
      }
    },
    mounted() {
      console.log('Message挂载了')
    },
    beforeDestroy() {
      console.log('Message即将销毁')
    },
	};
</script>

<style scoped>
  button {
    background-color: green;
    color: white;
  }
</style>